/*
Copyright 2019 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/

:root {
  --spectrum-actiongroup-button-gap-reset: 0px;
  --spectrum-actiongroup-quiet-compact-button-gap: var(--spectrum-global-dimension-size-25);
}

/* This is copied from our Flex component for now. */
.flex-container {
  /* this is necessary so that the inner margins don't affect anything outside */
  display: flex;
}

.flex-gap {
  /* apply a negative margin to counteract the margin on each item at the edges */
  margin: calc(var(--row-gap) / -2) calc(var(--column-gap) / -2);

  /* increase the width and height to account for this margin */
  /* Add 1px to fix rounding error in Safari (╯°□°)╯︵ ┻━┻ */
  width: calc(100% + calc(var(--column-gap) + 1px));
  height: calc(100% + var(--row-gap));
}

/* If the selector was .flex-gap > *, it wouldn't override when components have a margin 0 specified by a single
 * class selector, specificity is equal. Both are one class. Neither > nor * contribute to specificity.
 * We need to make it more specific, so we raise it by 1 class.
 */
.flex-container .flex-gap > * {
  /* apply half of the gap to each side of every item */
  margin: calc(var(--row-gap) / 2) calc(var(--column-gap) / 2);
}


.spectrum-ActionGroup {
  display: flex;
  flex-wrap: wrap;
  --column-gap: var(--spectrum-actionbuttongroup-text-button-gap-x);
  --row-gap: var(--spectrum-actionbuttongroup-text-button-gap-y);

  .spectrum-ActionGroup-item {
    flex-shrink: 0;
  }

  .spectrum-ActionGroup-item--iconOnly {
    padding-inline-end: var(--spectrum-actionbutton-icon-padding-x);
  }

  &:focus {
    outline: none;
  }
}

.spectrum-ActionGroup--vertical {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  --column-gap: var(--spectrum-actiongroup-button-gap-reset);
  --row-gap: var(--spectrum-actionbuttongroup-text-button-gap-y);

  .spectrum-ActionGroup-item {
    > :not(svg) {
      inline-size: auto;
    }
  }

  &.spectrum-ActionGroup--quiet {
    .spectrum-ActionGroup-item {
      justify-content: flex-start;
    }
  }

  &.spectrum-ActionGroup--justified,
  &.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) {
    align-items: stretch;
  }
}

.spectrum-ActionGroup--compact {
  --column-gap: var(--spectrum-actiongroup-compact-button-gap);
  --row-gap: var(--spectrum-actiongroup-button-gap-reset);

  &.spectrum-ActionGroup--quiet {
    --column-gap: var(--spectrum-actiongroup-quiet-compact-button-gap);

    &.spectrum-ActionGroup--vertical {
      --column-gap: var(--spectrum-actiongroup-button-gap-reset);
      --row-gap: var(--spectrum-actiongroup-quiet-compact-button-gap);
    }
  }

  &:not(.spectrum-ActionGroup--quiet) {
    flex-wrap: nowrap;

    .spectrum-ActionGroup-item {
      position: relative;
      --spectrum-button-border-radius: 0px;
      z-index: 1;

      &:first-child {
        border-start-start-radius: var(--spectrum-actionbutton-border-radius);
        border-end-start-radius: var(--spectrum-actionbutton-border-radius);

        /* focus ring */
        &:after {
          border-start-start-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-alias-focus-ring-gap));
          border-end-start-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-alias-focus-ring-gap));
        }
      }

      &:last-child {
        border-start-end-radius: var(--spectrum-actionbutton-border-radius);
        border-end-end-radius: var(--spectrum-actionbutton-border-radius);

        /* focus ring */
        &:after {
          border-start-end-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-alias-focus-ring-gap));
          border-end-end-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-alias-focus-ring-gap));
        }
      }

      &.spectrum-ActionGroup-item--isDisabled {
        z-index: 0;
      }

      &.is-selected {
        z-index: 2;
      }

      &:hover {
        z-index: 3;
      }

      &:focus {
        z-index: 4;
      }
    }

    &.spectrum-ActionGroup--vertical {
      --column-gap: var(--spectrum-actiongroup-button-gap-reset);
      --row-gap: var(--spectrum-actiongroup-compact-button-gap);

      .spectrum-ActionGroup-item {
        border-radius: 0;

        &:first-child {
          border-radius: 0;
          border-start-start-radius: var(--spectrum-actionbutton-border-radius);
          border-start-end-radius: var(--spectrum-actionbutton-border-radius);
        }

        &:last-child {
          border-radius: 0;
          border-end-start-radius: var(--spectrum-actionbutton-border-radius);
          border-end-end-radius: var(--spectrum-actionbutton-border-radius);
        }
      }
    }
  }
}

.spectrum-ActionGroup--justified {
  .spectrum-ActionGroup-item {
    flex: 1;

    > :not(svg) {
      inline-size: auto;
    }
  }

  &.spectrum-ActionGroup--vertical {
    .spectrum-ActionGroup-item {
      flex: 1 0 auto;
    }
  }
}

.spectrum-ActionGroup--overflowCollapse {
  flex-wrap: nowrap;
}

.spectrum-ActionGroup-menu {
  /* specificity must be higher than `.spectrum-ActionButton .spectrum-Icon` */
  svg.spectrum-ActionGroup-menu-chevron {
    order: 2;
    padding-inline-start: 0;
    padding-inline-end: var(--spectrum-actionbutton-icon-padding-x);
  }

  .spectrum-ActionGroup-menu-contents {
    /* This wrapper is needed to keep the :only-child/sibling selectors
     * in button CSS working with the additional chevron element. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
